<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="联系方式" prop="userContactTelephone">
                <el-input v-model="queryParams.userContactTelephone" placeholder="请输入联系方式" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="订单状态" prop="shootOrderStatus">
                <el-select v-model="queryParams.shootOrderStatus" placeholder="请订单状态" clearable style="width: 240px">
                    <el-option v-for="dict in status" :key="dict.dictValue" :label="dict.dictLabel"
                        :value="dict.dictValue" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                    v-hasPermi="['ski:shoot:list']">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['system:info:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['ski:shoot:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="shootList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="商户订单号" align="center" prop="outTradeNo" show-overflow-tooltip />
            <el-table-column label="联系方式" align="center" prop="userContactTelephone" show-overflow-tooltip />
            <el-table-column label="预约时间" align="center" prop="reservationTime" show-overflow-tooltip />
            <el-table-column label="预约雪场" align="center" prop="mealSnowName" show-overflow-tooltip />
            <el-table-column label="订单状态" align="center" prop="shootOrderStatus" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag size="small" type="warning" v-if="scope.row.shootOrderStatus == 'canceled'">已取消</el-tag>
                    <el-tag size="small" type="warning" v-if="scope.row.shootOrderStatus == 'paid_deposit'">已支付定金</el-tag>
                    <el-tag size="small" type="warning" v-if="scope.row.shootOrderStatus == 'confirm_photo'">确定约拍</el-tag>
                    <el-tag size="small" type="warning"
                        v-if="scope.row.shootOrderStatus == 'Service_completion'">服务完成</el-tag>
                    <el-tag size="small" type="warning"
                        v-if="scope.row.shootOrderStatus == 'paid_balance_payment'">已支付尾款</el-tag>
                    <el-tag size="small" type="warning"
                        v-if="scope.row.shootOrderStatus == 'composite_footage'">用户提交素材合成</el-tag>
                    <el-tag size="small" type="success" v-if="scope.row.shootOrderStatus == 'completed'">订单完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="定金金额" align="center" prop="depositTotal" show-overflow-tooltip />
            <el-table-column label="订单尾款" align="center" prop="total" show-overflow-tooltip />
            <el-table-column label="是否分配" align="center" prop="haveAllocation" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-tag size="small" type="success" v-if="scope.row.haveAllocation == true">是</el-tag>
                    <el-tag size="small" type="info" v-if="scope.row.haveAllocation == false">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="摄影师" align="center" prop="cameramanName" show-overflow-tooltip />
            <el-table-column label="下单时间" align="center" prop="orderTime" show-overflow-tooltip />
            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['ski:shoot:query']"
                        @click="handleDetail(scope.row)">详情</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" v-hasPermi="['ski:shoot:remove']"
                        @click="handleDelete(scope.row)">删除</el-button>
                    <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                        <span class="el-dropdown-link">
                            <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="handleCameraMan" icon="el-icon-key"
                                v-hasPermi="['ski:shoot:distribution']"
                                v-if="scope.row.shootOrderStatus == 'paid_deposit'">分配摄影师</el-dropdown-item>

                            <el-dropdown-item command="handleBalancePayment" icon="el-icon-circle-check"
                                v-hasPermi="['ski:shoot:uploadMediaInfo']" v-if="scope.row.shootOrderStatus == 'confirm_photo'
                                    || scope.row.shootOrderStatus == 'Service_completion'">设置尾款</el-dropdown-item>

                            <el-dropdown-item command="handleUpload" icon="el-icon-circle-check"
                                v-hasPermi="['ski:shoot:uploadMediaInfo']"
                                v-if="scope.row.shootOrderStatus == 'confirm_photo'">上传素材</el-dropdown-item>

                            <el-dropdown-item command="handleEditNumber" icon="el-icon-edit" v-hasPermi="['ski:shoot:edit']"
                                v-if="scope.row.shootOrderStatus == 'paid_balance_payment'
                                    || scope.row.shootOrderStatus == 'composite_footage'
                                    ">修改次数</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改摄影师对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
            <el-form ref="form" :model="form" label-width="125px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="商户订单号">
                            <el-input v-model="form.orderShoot.outTradeNo" />
                        </el-form-item>
                        <el-form-item label="预约雪场">
                            <el-input v-model="form.orderShoot.mealSnowName" />
                        </el-form-item>
                        <el-form-item label="预约时间">
                            <el-input v-model="form.orderShoot.reservationTime" />
                        </el-form-item>
                        <el-form-item label="订单尾款">
                            <el-input v-model="form.orderShoot.total" />
                        </el-form-item>
                        <el-form-item label="剩余合成剪辑数量">
                            <el-input v-model="form.orderShoot.residueEditNumber" />
                        </el-form-item>
                        <el-form-item label="是否分配摄影师">
                            <el-tag size="small" type="success" v-if="form.orderShoot.haveAllocation == true">已分配</el-tag>
                            <el-tag size="small" type="info" v-if="form.orderShoot.haveAllocation == false">未分配</el-tag>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系方式">
                            <el-input v-model="form.orderShoot.userContactTelephone" />
                        </el-form-item>
                        <el-form-item label="下单时间">
                            <el-input v-model="form.orderShoot.orderTime" />
                        </el-form-item>
                        <el-form-item label="定金金额">
                            <el-input v-model="form.orderShoot.depositTotal" />
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <el-tag size="small" type="warning"
                                v-if="form.orderShoot.shootOrderStatus == 'canceled'">已取消</el-tag>
                            <el-tag size="small" type="warning"
                                v-if="form.orderShoot.shootOrderStatus == 'paid_deposit'">已支付定金</el-tag>
                            <el-tag size="small" type="warning"
                                v-if="form.orderShoot.shootOrderStatus == 'confirm_photo'">确定约拍</el-tag>
                            <el-tag size="small" type="warning"
                                v-if="form.orderShoot.shootOrderStatus == 'Service_completion'">服务完成</el-tag>
                            <el-tag size="small" type="warning"
                                v-if="form.orderShoot.shootOrderStatus == 'paid_balance_payment'">已支付尾款</el-tag>
                            <el-tag size="small" type="warning"
                                v-if="form.orderShoot.shootOrderStatus == 'composite_footage'">用户提交素材合成</el-tag>
                            <el-tag size="small" type="success"
                                v-if="form.orderShoot.shootOrderStatus == 'completed'">订单完成</el-tag>
                        </el-form-item>
                        <el-form-item label="摄影师名称">
                            <el-input v-model="form.orderShoot.cameramanName" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="素材信息">
                    <div class="mediaBox">
                        <div class="mediaPic" v-for="item in form.orderShootMaterialList" :key="item.id">
                            <img :src="item.mediaUrl" alt="" srcset="" v-if="item.fileMediaType == 'image'">
                            <video :src="item.mediaUrl" :controls="true" v-if="item.fileMediaType == 'video'"></video>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 分配摄影师对话框 -->
        <el-dialog :title="title" :visible.sync="openCameraMan" width="900px" append-to-body>
            <el-table v-loading="loading" :data="cameraList" size="mini" @selection-change="handleSelectionChange2">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="真实姓名" align="center" prop="cameramanName" width="150" show-overflow-tooltip />
                <el-table-column label="联系方式" align="center" prop="phone" width="120" show-overflow-tooltip />
                <el-table-column label="性别" align="center" prop="sex" width="120">
                    <template slot-scope="scope">
                        <img style="width:25px;" v-if="scope.row.sex == 0" src="../../../assets/images/woman.png" alt="">
                        <img style="width:25px;" v-if="scope.row.sex == 1" src="../../../assets/images/man.png" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="身份证号" align="center" prop="cameramanIdCard" show-overflow-tooltip />
                <el-table-column label="滑雪技能" align="center" prop="skiSkill">
                    <template slot-scope="scope">
                        <el-tag size="small" type="warning" v-if="scope.row.skiSkill == 'single_board'">单板</el-tag>
                        <el-tag size="small" type="warning" v-if="scope.row.skiSkill == 'double_board'">双板</el-tag>
                        <el-tag size="small" type="success" v-if="scope.row.skiSkill == 'metropolitan'">都会</el-tag>
                        <el-tag size="small" type="info"
                            v-if="scope.row.skiSkill == 'none' || !scope.row.skiSkill">什么都不会</el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total2 > 0" :total="total2" :page.sync="queryParams2.pageNum"
                :limit.sync="queryParams2.pageSize" @pagination="getCameraMan" />

            <div slot="footer" class="dialog-footer">
                <el-button @click="openCameraMan = false">取 消</el-button>
                <el-button type="primary" @click="submitCameraMan" :disabled="single">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 上传素材对话框 -->
        <el-dialog :title="title" :visible.sync="openMediaInfo" width="500px" append-to-body :before-close="cancel">
            <el-form ref="formMediaInfo" :model="form" label-width="80px">
                <el-form-item label="上传素材">
                    <el-upload ref="upload" class="upload-demo" action="#" :file-list="fileList" :headers="headers"
                        :before-upload="onBeforeUpload" :on-success="uploadSuccess" :http-request="handleFileUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitMediaFile">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    shootList,
    deleteShoot,
    detailShoot,
    assignCameraman,
    updateMediaFile,
    uploadMediaInfo,
    setBalancePayment,
    setResidueEditNumber,
    getMediaInfoi
} from '@/api/business/shoot'
import { getCameraList } from "@/api/business/skill";
import { getToken } from "@/utils/auth";
export default {
    // 组件名称
    name: 'shootList',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            total2: 0,
            // 约拍列表
            shootList: [],
            // 约拍套餐列表
            mealList: [],
            // 雪场列表
            snowFieldName: [],
            // 摄影师列表
            cameraList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 是否显示分配摄影师弹出层
            openCameraMan: false,
            // 是否显示上传素材对话框
            openMediaInfo: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userContactTelephone: null,
                shootOrderStatus: null,
                isAsc: 'desc',
                orderByColumn: 'createTime'
            },
            // 查询参数
            queryParams2: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {
                orderShoot: '',
                orderShootMaterialList: []
            },
            // 摄影师id
            cameraManId: '',
            // 摄影师名称
            cameramanName: '',
            // 上传素材form
            formMediaInfo: {},
            // 设置请求头
            headers: { Authorization: "Bearer " + getToken(), },
            fileList: [],
            //订单id
            orderShootId: '',
            // 订单用户memberId
            memberId: '',
            // 媒资id
            mediaIdsList: [],
            // 媒资url
            mediaUrlList: [],
            // 订单id
            orderId: '',
            mediaInfoList: [],
            // 状态列表
            status: [
                { dictLabel: '已取消', dictValue: 'canceled' },
                { dictLabel: '已支付定金', dictValue: 'paid_deposit' },
                { dictLabel: '确定约拍', dictValue: 'confirm_photo' },
                { dictLabel: '服务完成', dictValue: 'Service_completion' },
                { dictLabel: '已支付尾款', dictValue: 'paid_balance_payment' },
                { dictLabel: '用户提交素材合成', dictValue: 'composite_footage' },
                { dictLabel: ' 订单完成', dictValue: 'completed' },
            ]
        }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    created() {
    },
    mounted() {
        this.getList()
    },
    methods: {
        /** 获取列表 */
        getList() {
            this.loading = true
            shootList(this.queryParams).then(res => {
                this.shootList = res.rows
                this.total = res.total
                this.loading = false
            })
        },
        // 获取摄影师
        getCameraMan() {
            getCameraList({
                pageNum: this.queryParams2.pageNum,
                pageSize: this.queryParams2.pageSize
            }).then(res => {
                this.cameraList = res.rows
                this.total2 = res.total
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        // 多选框选中数据(摄影师列表)
        handleSelectionChange2(selection) {
            this.single = selection.length !== 1
            this.cameraManId = selection[0].id
            this.cameramanName = selection[0].cameramanName
        },
        /**详情按钮操作 */
        handleDetail(row) {
            console.log('row------------: ', row)
            const id = row.id || this.ids
            detailShoot(id).then(response => {

                this.$set(response.data.orderShoot, 'mealSnowName', row.mealSnowName)
                this.form.orderShoot = response.data.orderShoot
                console.log('response----------: ', response)
                this.form.orderShootMaterialList = response.data.orderShootMaterialList
                this.open = true;
                this.title = "约拍信息详情";
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除订单编号为"' + ids + '"的数据项？').then(function () {
                return deleteShoot(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },

        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                case "handleCameraMan":
                    this.handleCameraMan(row);
                    break;
                case "handleUpload":
                    this.handleUpload(row);
                    break;
                case 'handleEditNumber':
                    this.handleEditNumber(row);
                    break;
                case 'handleBalancePayment':
                    this.handleBalancePayment(row);
                    break;
                default:
                    break;
            }
        },

        // 分配摄影师
        handleCameraMan(row) {
            this.ids = row.id
            this.openCameraMan = true
            this.title = '分配摄影师'
            this.getCameraMan()
        },
        // 分配摄影师确定
        submitCameraMan() {
            // 摄影师id
            let cameramanId = this.cameraManId
            // 摄影师名称
            let cameramanName = this.cameramanName
            // 约拍订单id
            let orderShootId = this.ids
            assignCameraman(orderShootId, cameramanId, {
                cameramanName: cameramanName
            }).then(res => {
                this.$modal.msgSuccess("分配成功");
                this.getList();
                this.openCameraMan = false;
            })
        },

        // 取消
        cancel() {
            this.openMediaInfo = false
            this.$refs.upload.clearFiles()
        },

        // 上传素材
        handleUpload(row) {
            this.orderShootId = row.id
            this.memberId = row.memberId
            this.openMediaInfo = true
            this.title = '上传素材'
        },
        // 文件上传前对文件进行处理
        onBeforeUpload(file) {
            // console.log('file--------: ', file)
        },

        // 上传接口调取成功status为200
        uploadSuccess(res) {
            // console.log('res----------: ', res)
        },

        // 处理文件上传操作
        handleFileUpload(ele) {
            let formData = new FormData()
            let file = ele.file
            formData.append('file', file)
            formData.append('orderShootId', this.orderShootId)
            updateMediaFile(formData).then(response => {
                const mediaId = JSON.parse(response.msg).mediaId
                getMediaInfoi({
                    Action: 'GetMediaInfo',
                    userId: this.memberId,
                    mediaId: mediaId,
                }).then(resp => {
                    let ossFileName = resp.GetMediaInfoResult.MediaInfo
                        .FileInfoList[0].FileBasicInfo.FileUrl
                    let fileMediaType = resp.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileMediaType
                    let obj = {
                        fileMediaType: fileMediaType,
                        mediaIds: mediaId,
                        mediaUrl: ossFileName,
                        orderId: this.orderShootId,
                    }
                    let aa = []
                    aa.push(obj)
                    this.mediaInfoList = this.mediaInfoList.concat(aa)
                })
            })
        },

        // 上传素材确定
        submitMediaFile() {
            uploadMediaInfo(this.mediaInfoList).then(res => {
                if (res.code == 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.openMediaInfo = false;
                    this.getList();
                }
            })
        },
        // 设备尾款
        handleBalancePayment(row) {
            this.$prompt('设置尾款', '提示', {
                confirmButtonText: '确定',
                inputPattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
                inputErrorMessage: '请输入大于0的数字'
            }).then(({ value }) => {
                setBalancePayment(this.orderShootId, {
                    total: value
                }).then(aaa => {
                    this.$modal.msgSuccess("操作成功");
                    this.openMediaInfo = false;
                    this.getList();
                })
            })
        },
        // 修改次数
        handleEditNumber(row) {
            this.$prompt('合成剪辑作业数量', '提示', {
                confirmButtonText: '确定',
                inputPattern: /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/,
                inputErrorMessage: '请输入大于0的正整数'
            }).then(({ value }) => {
                setResidueEditNumber(row.id, {
                    residueEditNumber: value
                }).then(res => {
                    this.$modal.msgSuccess("操作成功");
                    this.getList();
                })
            })
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download('/system/shoot/export', {
                ...this.queryParams
            }, `shoot_${new Date().getTime()}.xlsx`)
        },

    },
}
</script> 

<style lang="scss" scoped>
.mediaBox {
    display: flex;
    flex-wrap: wrap;
}

.mediaPic {
    width: 25%;

    img {
        width: 120px;
        height: 120px;
    }

    video {
        width: 120px;
        height: 120px;
    }
}
</style>
